<script setup>
import { onMounted } from 'vue'
import { ref, inject } from 'vue'

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

const chartContainer = ref(null)
const $echarts = inject('$echarts') // 从全局属性中获取 $echarts 对象

// 设置配置项
const option = ref({
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'line',
      stack: 'x'
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'line',
      stack: 'x'
    }
  ]
})

let myEChart
let myEChartsLine
// // 折线图
let changeLine = () => {
  // 获取组件实例
  myEChart = $echarts.init(document.getElementById('myEChartsBar'))

  // 得到数据
  myEChart.setOption(option.value)
  // 根据页面大小自动响应图表大小
  // window.addEventListener('resize', function () {
  //   myEChart.resize()
  // })
  myEChartsLine = $echarts.init(document.getElementById('myEChartsLine'))

  // 得到数据
  myEChartsLine.setOption(option.value)
}

function fns() {
  option.value.series[0].data[0] = 1080
  myEChart.setOption(option.value)
}

onMounted(() => {
  changeLine()
})

// 顶部导航条
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<template>
  <!-- 顶部导航条 -->
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
    >
      <el-menu-item index="0">LOGO</el-menu-item>
      <div class="flex-grow"></div>
      <el-menu-item index="1">Processing Center</el-menu-item>
      <el-sub-menu index="2">
        <template #title>Workspace</template>
        <el-menu-item index="2-1">item one</el-menu-item>
        <el-menu-item index="2-2">item two</el-menu-item>
        <el-menu-item index="2-3">item three</el-menu-item>
        <el-sub-menu index="2-4">
          <template #title>item four</template>
          <el-menu-item index="2-4-1">item one</el-menu-item>
          <el-menu-item index="2-4-2">item two</el-menu-item>
          <el-menu-item index="2-4-3">item three</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
    </el-menu>
  </div>
  <!-- 中部内容区域 -->
  <div class="accounting">
    <!-- 左侧边栏 -->
    <div class="left-slider">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <span>基础数据</span>
          </template>
          <el-menu-item-group title="Group One">
            <el-menu-item index="1-1">item one</el-menu-item>
            <el-menu-item index="1-2">item two</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="Group Two">
            <el-menu-item index="1-3">item three</el-menu-item>
          </el-menu-item-group>
          <el-sub-menu index="1-4">
            <template #title>item four</template>
            <el-menu-item index="1-4-1">item one</el-menu-item>
          </el-sub-menu>
        </el-sub-menu>
        <el-menu-item index="2">
          <span>Navigator Two</span>
        </el-menu-item>
        <el-menu-item index="3">
          <span>年度</span>
        </el-menu-item>
        <el-menu-item index="4">
          <span>Navigator Four</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="right-store">
      <div>gongzi</div>
      <div id="myEChartsBar"></div>
      <div>zongji</div>
      <div id="myEChartsLine"></div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.el-menu-demo {
  width: 100%;
  height: 80px;
  position: fixed;
  top: 0;
  left: 0;
}

.flex-grow {
  flex: 1;
}
.accounting {
  display: flex;
  margin-top: 80px;
}

.left-slider {
  // width: 160px;
}

.right-store {
  padding-left: 160px;
}
.el-menu-vertical-demo {
  position: fixed;
  width: 160px;
  height: 100vh;
  left: 0;
  top: 80px;
}

#myEChartsBar {
  width: 800px;
  height: 700px;
  // max-height: 500px;
}
#myEChartsLine {
  max-height: 500px;
  // max-height: 400px;
  height: 500px;
}
</style>
